class Zoom{
    constructor(){
        //把获取元素当成对象的属性
        this.smallBox = document.querySelector('.pic')
        this.mask = document.querySelector('.a111')
        this.bigBox = document.querySelector('.picRight')
        this.pic = document.querySelector('.bigImg')
        //调用初始化方法即可
        this.init()
    }
    init(){
        this.over()
        this.out()
        this.move()
    }
    over(){
        this.smallBox.onmouseover = ()=>{
            this.mask.style.display = 'block'
            this.bigBox.style.display = 'block'
        }   
    }
    out(){
        this.smallBox.onmouseout = ()=>{
            this.mask.style.display = 'none'
            this.bigBox.style.display = 'none'
        }
    }
    move(){
        this.smallBox.onmousemove = (e)=>{
            //获取坐标
            let x = e.clientX - this.smallBox.offsetParent.offsetLeft - this.mask.offsetWidth/2
            let y = e.clientY - this.smallBox.offsetParent.offsetTop - this.mask.offsetHeight/2

            //边界值判断
            if(x<=0){
                x = 0
            }else if(x>=this.smallBox.offsetWidth - this.mask.offsetWidth){
                x = this.smallBox.offsetWidth - this.mask.offsetWidth
            }
            if(y<=0){
                y = 0
            }else if(y>=this.smallBox.offsetHeight - this.mask.offsetHeight){
                y = this.smallBox.offsetHeight - this.mask.offsetHeight
            }

            //进行赋值操作
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'

            //进行计算比例
            let w =  x / (this.smallBox.offsetWidth - this.mask.offsetWidth)
            let h =  y / (this.smallBox.offsetHeight - this.mask.offsetHeight)
            
            //进行赋值操作
            this.pic.style.left = -w * (this.pic.offsetWidth - this.bigBox.offsetWidth) + 'px'
            this.pic.style.top = -h * (this.pic.offsetHeight - this.bigBox.offsetHeight) + 'px'
        }
    }
}
new Zoom()

